<template>
  <div v-if="visible" class="file-selector">
    <div class="inner w-[90%] h-[90%] flex flex-col">
      <HeadVue
        @close="visible = false"
        :disable-selected="!!type"
        @change="onChange"
        :selected="selectedLibrary"
      ></HeadVue>
      <CardVue multiple :limit="limit" v-model:selected="selectedLibrary" :type="type"></CardVue>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Library } from "@/api/service/library/types";
import CardVue from "./card/Card.vue";
import { resetQuery } from "./data/table";
import HeadVue from "./head/Head.vue";

const selectedLibrary = ref<Library[]>([]);

const emit = defineEmits<{
  (e: "change", data: Library[]): void;
  // 可以定义其他事件...
}>();

const visible = defineModel<boolean>("visible");

const props = withDefaults(
  defineProps<{
    limit?: number;
    // "0" | "1"，图片或视频
    type?: string;
    sizeId?: string;
    multiple?: boolean;
    selected?: Library[];
  }>(),
  {
    limit: 1
  }
);
const onChange = () => {
  visible.value = false;
  emit("change", selectedLibrary.value);
  selectedLibrary.value = [];
};

onUnmounted(() => {
  resetQuery();
});

watch(
  () => props.selected,
  (v) => {
    selectedLibrary.value = props.selected || [];
  }
);
</script>

<style lang="scss" scoped>
.file-selector {
  width: 100%;
  height: 100vh;
  background: rgba(31, 31, 31, 0.685);
  z-index: 1000;
  border-radius: 4px;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  .inner {
    background: white;
    overflow: auto;
    border-radius: 8px;
  }
}
</style>
